<template>
  <div class="new">
    <template v-if="infoList.length !=0">
      <div v-for="(item,index) in infoList" :key="index" class="newinfo">
        <div class="time">2023-03-03 00:00:00</div>
        <div class="info">dshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfn</div>
      </div>
    </template>

    <el-empty v-else description="暂无消息" class="empty" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        {
          time: '2023-03-03 00:00:00',
          info: 'dshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnv'
        },
        {
          time: '2023-03-03 00:00:00',
          info: 'dshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnv'
        },
        {
          time: '2023-03-03 00:00:00',
          info: 'dshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnv'
        }
      ]
    }
  },

  created() {
    for (let i = 0; i < 50; i++) {
      this.infoList.push({
        time: '2023-03-03 00:00:00',
        info: 'dshjfsdjhjkdsnjkncjkjcnkjnvjkfnvjdfndshjfsdjhjkdsnjkncjkjcnkjnvjkfnv'
      })
    }
  },

  methods: {

  }
}
</script>

<style scoped lang="scss">
.new {
  max-height: 700px;
  overflow: auto;
}
  .newinfo {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    background-color: #edeffb;
    margin-bottom: 15px;
    border-radius: 10px;
     .time {
      width: 200px;
      margin-right: 15px;
     }
     .info {
      flex:1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
     }
  }
  .empty {
      margin-top: 150px;
    }
</style>
